import React from "react";
import "../../../css/body/main.css"

import {Card} from 'antd';

const {Meta} = Card;

class Main extends React.Component {

    render() {
        return (
            <div className={"body-main"}>
                <div className={"body-card"}>
                    <Card
                        hoverable
                        style={{width: "100%",position:"relative"}}
                        cover={<img style={{borderRadius: 5}} className={'body-card-img'} alt="video" src={require('./../../../images/body/video.jpg').default}/>}
                    >
                        <Meta title="视频专区" description="relaxing life"/>
                    </Card>
                    <div className={"body-card-two"}>

                    </div>
                </div>

                <div className={"body-card"}>
                    <Card
                        hoverable
                        style={{width: "100%"}}
                        cover={<img style={{borderRadius: 5}} className={'body-card-img'} alt="video" src={require('./../../../images/body/music.jpg').default}/>}
                    >
                        <Meta title="音乐专区" description="enjoying yourselves"/>
                    </Card>
                </div>
                <div className={"body-card"}>
                    <Card
                        hoverable
                        style={{width: "100%"}}
                        cover={<img style={{borderRadius: 5}} className={'body-card-img'} alt="video" src={require('../../../images/body/animation.jpeg').default}/>}
                    >
                        <Meta title="动漫专区" description="Aesthetic experience"/>
                    </Card>
                </div>
                <div className={"body-card"}>
                    <Card
                        hoverable
                        style={{width: "100%"}}
                        cover={<img style={{borderRadius: 5}} className={'body-card-img'} alt="video" src={require('./../../../images/body/movie.jpg').default}/>}
                    >
                        <Meta title="电影专区" description="Visual feast"/>
                    </Card>
                </div>
                <div className={"body-card"}>
                    <Card
                        hoverable
                        style={{width: "100%"}}
                        cover={<img style={{borderRadius: 5}} className={'body-card-img'} alt="video" src={require('./../../../images/body/more.jpg').default}/>}
                    >
                        <Meta title="更多专区" description="More interesting"/>
                    </Card>
                </div>

            </div>


        )
    }
}

export default Main;